
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>菜单&权限校验 · classbro-u-center-web-v2.0</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="Gj">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism-tomorrow.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
        <link rel="stylesheet" href="../index.css">
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    
    <link rel="prev" href="Xss.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    概要
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="Utils.html">
            
                <a href="Utils.html">
            
                    
                    工具集
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Config.html">
            
                <a href="Config.html">
            
                    
                    环境变量
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="I18n.html">
            
                <a href="I18n.html">
            
                    
                    国际化
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="Interceptor.html">
            
                <a href="Interceptor.html">
            
                    
                    拦截器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="Vuex.html">
            
                <a href="Vuex.html">
            
                    
                    Vuex
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="Api.html">
            
                <a href="Api.html">
            
                    
                    接口文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="Icon.html">
            
                <a href="Icon.html">
            
                    
                    图标
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="Xss.html">
            
                <a href="Xss.html">
            
                    
                    Xss
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.10" data-path="Permission.html">
            
                <a href="Permission.html">
            
                    
                    菜单&权限校验
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >菜单&权限校验</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="&#x6743;&#x9650;&#x6821;&#x9A8C;">&#x6743;&#x9650;&#x6821;&#x9A8C;</h1>
<blockquote>
<p>1&#x3001;&#x901A;&#x8FC7;&#x81EA;&#x5B9A;&#x4E49;&#x5168;&#x5C40;&#x7684;&#x6307;&#x4EE4;&#x5DF2;&#x7ECF;&#x51FD;&#x6570;&#xFF0C;&#x63A7;&#x5236;&#x7528;&#x6237;&#x7684;&#x64CD;&#x4F5C;&#x6743;&#x9650;</p>
<p>2&#x3001;&#x83DC;&#x5355;&#x6E32;&#x67D3;&#x9700;&#x8981;&#x7ED3;&#x5408;&#x62E6;&#x622A;&#x5668;&#x4F7F;&#x7528;</p>
</blockquote>
<h4 id="&#x6743;&#x9650;&#x6821;&#x9A8C;&#x6307;&#x4EE4;">&#x6743;&#x9650;&#x6821;&#x9A8C;&#x6307;&#x4EE4;</h4>
<blockquote>
<p><code>v-permission</code>  &#x76EE;&#x5F55;&#x5730;&#x5740; <code>src/directives/permission.js</code></p>
<p>&#x91CC;&#x9762;&#x5305;&#x542B;&#x4E86;&#x6307;&#x4EE4; &amp; &#x6821;&#x9A8C;&#x51FD;&#x6570;</p>
</blockquote>
<pre class="language-"><code class="lang-javascript"><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">&quot;@/store&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">_permission</span><span class="token punctuation">(</span><span class="token parameter">permissionRoles</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> roles <span class="token operator">=</span> store<span class="token punctuation">.</span>getters <span class="token operator">&amp;&amp;</span> store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>roles<span class="token punctuation">;</span>
  <span class="token keyword">const</span> hasPermission <span class="token operator">=</span> roles<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">role</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> permissionRoles<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>role<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> hasPermission<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">inserted</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> binding</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> roles <span class="token punctuation">}</span> <span class="token operator">=</span> binding<span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>roles <span class="token operator">&amp;&amp;</span> roles <span class="token keyword">instanceof</span> <span class="token class-name">Array</span> <span class="token operator">&amp;&amp;</span> roles<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> hasPermission <span class="token operator">=</span> <span class="token function">_permission</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>hasPermission<span class="token punctuation">)</span> el<span class="token punctuation">.</span>parentNode <span class="token operator">&amp;&amp;</span> el<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">need roles! Like v-permission=&quot;[&apos;admin&apos;,&apos;editor&apos;]&quot;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">/**
 * @param {Array} value
 * @returns {Boolean}
 */</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">checkPermission</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">roles</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>roles <span class="token operator">&amp;&amp;</span> roles <span class="token keyword">instanceof</span> <span class="token class-name">Array</span> <span class="token operator">&amp;&amp;</span> roles<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> hasPermission <span class="token operator">=</span> <span class="token function">_permission</span><span class="token punctuation">(</span>roles<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>hasPermission<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">need roles! Like checkPermission=&quot;[&apos;admin&apos;,&apos;editor&apos;]&quot;</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
<blockquote>
<p><code>main.js</code> &#x6CE8;&#x518C;&#x6307;&#x4EE4;</p>
</blockquote>
<pre class="language-"><code class="lang-javascript"><span class="token keyword">import</span> permission <span class="token keyword">from</span> <span class="token string">&quot;./directives/index&quot;</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>filters<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  Vue<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> filters<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h4 id="&#x6307;&#x4EE4;&#x4F7F;&#x7528;">&#x6307;&#x4EE4;&#x4F7F;&#x7528;</h4>
<blockquote>
<p><code>v-permission=&quot;[&apos;admin&apos;]&quot;</code></p>
</blockquote>
<pre class="language-"><code class="lang-javascript"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x65B0;&#x589E;&#x89D2;&#x8272; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>el<span class="token operator">-</span>button v<span class="token operator">-</span>permission<span class="token operator">=</span><span class="token string">&quot;[&apos;admin&apos;]&quot;</span><span class="token operator">&gt;</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token function">$t</span><span class="token punctuation">(</span><span class="token string">&apos;roleManage.index.newRole&apos;</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>el<span class="token operator">-</span>button<span class="token operator">&gt;</span>
</code></pre>
<h4 id="v-if-&#x6761;&#x4EF6;&#x65B9;&#x5F0F;&#x6821;&#x9A8C;&#x6743;&#x9650;">v-if &#x6761;&#x4EF6;&#x65B9;&#x5F0F;&#x6821;&#x9A8C;&#x6743;&#x9650;</h4>
<blockquote>
<p>&#x7531;&#x4E8E; &#x8BE5;&#x6307;&#x4EE4;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x6839;&#x636E;&#x6743;&#x9650;&#x5224;&#x65AD;&#x662F;&#x5426;&#x5220;&#x9664;Dom&#x5143;&#x7D20;&#x3002;&#x4F46;&#x662F;&#x4E00;&#x4E9B;&#x7279;&#x6B8A;&#x60C5;&#x51B5;&#x4E0B;&#x4E0D;&#x8D77;&#x4F5C;&#x7528;&#x3002;</p>
<p>&#x4F8B;&#x5982;&#xFF1A;<code>el-table-column</code> </p>
<p>&#x7531;&#x4E8E;&#x6E32;&#x67D3;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x95EE;&#x9898;&#x3002;el-table &#x662F;&#x5F02;&#x6B65;&#x66F4;&#x65B0;&#x6570;&#x636E;&#x3002;&#x8FD9;&#x79CD;&#x60C5;&#x51B5;&#x4E0B;&#x9700;&#x8981;&#x7528;&#x5230; <code>v-if</code></p>
<p><code>v-if=&quot;checkPermission([&apos;admin&apos;])&quot;</code></p>
</blockquote>
<pre class="language-"><code class="lang-javascript"><span class="token operator">...</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> &#x5C97;&#x4F4D;&#x7EA7;&#x522B; <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>el<span class="token operator">-</span>table<span class="token operator">-</span>column v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">&quot;checkPermission([&apos;admin&apos;])&quot;</span> <span class="token operator">:</span>label<span class="token operator">=</span><span class="token string">&quot;$t(&apos;stationManage.stationTable.table.level&apos;)&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

    <span class="token operator">...</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> checkPermission <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@/directives/permission&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span>
        checkPermission<span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">...</span>
</code></pre>
<h4 id="&#x83DC;&#x5355;&#x52A8;&#x6001;&#x6E32;&#x67D3;">&#x83DC;&#x5355;&#x52A8;&#x6001;&#x6E32;&#x67D3;</h4>
<blockquote>
<p>&#x601D;&#x8DEF;&#xFF1A;</p>
<p>&#x62E6;&#x622A;&#x5668;&#xFF1A;<code>src/utils/Interceptor.js</code> &#x901A;&#x8FC7;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF0C;<code>router.beforeEach</code> </p>
<p>&#x7ED3;&#x5408;<code>Vuex/...permission&#x6587;&#x4EF6;</code> &#x548C; <code>utils/Menus.js</code> &#x751F;&#x6210;&#x6743;&#x9650;&#x83DC;&#x5355;</p>
</blockquote>
<pre class="language-"><code class="lang-javascript">router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> _<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  NProgress<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> RouterPath<span class="token punctuation">.</span><span class="token constant">LOGIN</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> RouterPath<span class="token punctuation">.</span><span class="token constant">HOME</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      NProgress<span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>store<span class="token punctuation">.</span>getters<span class="token punctuation">.</span>routerLoadDone<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">const</span> <span class="token punctuation">{</span> isAdmin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&quot;getUserInfo&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token comment">//&#x6B64;&#x5904; &#x7ED3;&#x5408;vuex &#x52A8;&#x6001; &#x751F;&#x6210;&#x53EF;&#x67E5;&#x770B;&#x7684; &#x8DEF;&#x7531;&#x5730;&#x5740;&#x5217;&#x8868;</span>
          <span class="token keyword">const</span> accessRoutes <span class="token operator">=</span> <span class="token keyword">await</span> store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&quot;generateRoutes&quot;</span><span class="token punctuation">,</span> isAdmin<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token comment">// &#x901A;&#x8FC7; router.addRoutes &#x51FD;&#x6570;&#xFF0C;&#x6309;&#x9700;&#x52A0;&#x8F7D;&#x8BBF;&#x95EE;&#x83DC;&#x5355;&#x548C;&#x76EE;&#x5F55;</span>
          router<span class="token punctuation">.</span><span class="token function">addRoutes</span><span class="token punctuation">(</span>accessRoutes<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span>to<span class="token punctuation">,</span> replace<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// remove token and go to login page to re-login</span>
        <span class="token keyword">await</span> store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&quot;resetToken&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        Message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error <span class="token operator">||</span> <span class="token string">&quot;Has Error&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token function">next</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/login?redirect=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>to<span class="token punctuation">.</span>path<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        NProgress<span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>whiteList<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>path<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span>RouterPath<span class="token punctuation">.</span><span class="token constant">LOGIN</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      NProgress<span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h4 id="menus">Menus</h4>
<blockquote>
<p>&#x8DEF;&#x5F84; <code>src/utils/Menus.js</code></p>
<p>&#x601D;&#x8DEF;&#xFF1A;&#x6839;&#x636E;&#x63A5;&#x53E3;&#x8FD4;&#x56DE; menus &#x5217;&#x8868;&#xFF0C;&#x8FD4;&#x56DE;&#x8BBF;&#x95EE;&#x7684;&#x6743;&#x9650;&#x83DC;&#x5355;</p>
</blockquote>
<pre class="language-"><code class="lang-javascript"><span class="token keyword">import</span> <span class="token punctuation">{</span> MenuType<span class="token punctuation">,</span> MenuStatus <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@/utils/Enum/Menu&quot;</span><span class="token punctuation">;</span>

<span class="token comment">/* &#x767D;&#x540D;&#x5355; */</span>
<span class="token keyword">const</span> whiteList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;404&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">/**
 * &#x6839;&#x636E;&#x6743;&#x9650; &#x52A0;&#x8F7D;&#x83DC;&#x5355;
 * @param {Array} assessedMenus &#x6743;&#x9650;&#x83DC;&#x5355;
 * @param {Array} asyncRoutes &#x9884;&#x52A0;&#x8F7D;&#x83DC;&#x5355;
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">LoadMenus</span><span class="token punctuation">(</span><span class="token parameter">assessedMenus<span class="token punctuation">,</span> asyncRoutes</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token constant">CATALOG</span> <span class="token punctuation">}</span> <span class="token operator">=</span> MenuType<span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token constant">ENABLE</span> <span class="token punctuation">}</span> <span class="token operator">=</span> MenuStatus<span class="token punctuation">;</span>

  <span class="token comment">/** &#x5148;&#x9884;&#x52A0;&#x8F7D; &#x9700;&#x8981;&#x6DFB;&#x52A0;&#x7684;&#x83DC;&#x5355; */</span>
  <span class="token keyword">let</span> menuCache <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    childCache <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  asyncRoutes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> meta<span class="token punctuation">,</span> children <span class="token punctuation">}</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>
    <span class="token comment">/* &#x76EE;&#x5F55; */</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>meta<span class="token punctuation">)</span> menuCache<span class="token punctuation">[</span>meta<span class="token punctuation">.</span>title<span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>
    <span class="token comment">/* &#x83DC;&#x5355; */</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>children<span class="token punctuation">)</span> <span class="token function">childsForMap</span><span class="token punctuation">(</span>childCache<span class="token punctuation">,</span> children<span class="token punctuation">,</span> meta<span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">/* &#x9700;&#x8981;&#x52A0;&#x8F7D;&#x7684;&#x76EE;&#x5F55; */</span>
  <span class="token keyword">let</span> resultArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  assessedMenus
    <span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span>orderNo <span class="token operator">-</span> b<span class="token punctuation">.</span>orderNo<span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> menuType<span class="token punctuation">,</span> menuPerms<span class="token punctuation">,</span> subMenus<span class="token punctuation">,</span> status <span class="token punctuation">}</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>
      <span class="token comment">/* &#x76EE;&#x5F55; */</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">+</span>menuType <span class="token operator">===</span> <span class="token constant">CATALOG</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">+</span>status <span class="token operator">===</span> <span class="token constant">ENABLE</span> <span class="token operator">&amp;&amp;</span> menuCache<span class="token punctuation">[</span>menuPerms<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        menuCache<span class="token punctuation">[</span>menuPerms<span class="token punctuation">]</span><span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        menuCache<span class="token punctuation">[</span>menuPerms<span class="token punctuation">]</span><span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token function">getChildMenus</span><span class="token punctuation">(</span>
          subMenus<span class="token punctuation">,</span>
          childCache<span class="token punctuation">,</span>
          menuPerms
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        resultArray<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>menuCache<span class="token punctuation">[</span>menuPerms<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">/* &#x6DFB;&#x52A0;&#x767D;&#x540D;&#x5355; */</span>
  whiteList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">white</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>menuCache<span class="token punctuation">[</span>white<span class="token punctuation">]</span><span class="token punctuation">)</span> resultArray<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>menuCache<span class="token punctuation">[</span>white<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> resultArray<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * &#x83B7;&#x53D6;&#x5B50;&#x83DC;&#x5355;&#x5217;&#x8868;
 * @param {Array} subMenus &#x6743;&#x9650;&#x5B50;&#x83DC;&#x5355;
 * @param {Object} asyncChildMap &#x9884;&#x52A0;&#x8F7D;&#x5B50;&#x83DC;&#x5355; Map
 * @param {String} pCode &#x7236;&#x7EA7;&#x6743;&#x9650;&#x6807;&#x8BC6;
 */</span>
<span class="token keyword">function</span> <span class="token function">getChildMenus</span><span class="token punctuation">(</span><span class="token parameter">subMenus<span class="token punctuation">,</span> childCache<span class="token punctuation">,</span> pCode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token constant">MENU</span> <span class="token punctuation">}</span> <span class="token operator">=</span> MenuType<span class="token punctuation">;</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token constant">ENABLE</span> <span class="token punctuation">}</span> <span class="token operator">=</span> MenuStatus<span class="token punctuation">;</span>

  <span class="token comment">/* &#x5B50;&#x83DC;&#x5355;&#x96C6;&#x5408; */</span>
  <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  subMenus
    <span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span>orderNo <span class="token operator">-</span> b<span class="token punctuation">.</span>orderNo<span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> menuPerms<span class="token punctuation">,</span> menuType<span class="token punctuation">,</span> status <span class="token punctuation">}</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>
      <span class="token keyword">const</span> _childMenu <span class="token operator">=</span> childCache<span class="token punctuation">[</span>menuPerms<span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">+</span>menuType <span class="token operator">===</span> <span class="token constant">MENU</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">+</span>status <span class="token operator">===</span> <span class="token constant">ENABLE</span> <span class="token operator">&amp;&amp;</span> _childMenu<span class="token punctuation">)</span>
        arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>childCache<span class="token punctuation">[</span>menuPerms<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token comment">/* &#x6DFB;&#x52A0; hidden&#x9875;&#x9762; */</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>childCache<span class="token punctuation">[</span>pCode<span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> childCache<span class="token punctuation">[</span>pCode<span class="token punctuation">]</span><span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span>
    arr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>childCache<span class="token punctuation">[</span>pCode<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> arr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/**
 * &#x5B50;&#x96C6;&#x83DC;&#x5355; &#x505A;HashMap
 * @param {Object} cache &#x5B50;&#x96C6;&#x83DC;&#x5355;HashMap
 * @param {Array} childs &#x9884;&#x5904;&#x7406;&#x5B50;&#x96C6;&#x5217;&#x8868;
 * @param {String} pCode &#x7236;&#x7EA7;&#x6743;&#x9650;&#x6807;&#x8BC6;
 */</span>
<span class="token keyword">function</span> <span class="token function">childsForMap</span><span class="token punctuation">(</span><span class="token parameter">cache<span class="token punctuation">,</span> childs<span class="token punctuation">,</span> pCode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  cache<span class="token punctuation">[</span>pCode<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  childs<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> hidden<span class="token punctuation">,</span> meta <span class="token punctuation">}</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>
    <span class="token comment">/* &#x6DFB;&#x52A0;&#x9690;&#x85CF;&#x9875; */</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>hidden<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      cache<span class="token punctuation">[</span>pCode<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> cache<span class="token punctuation">[</span>meta<span class="token punctuation">.</span>title<span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="Xss.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Xss">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"菜单&权限校验","level":"1.10","depth":1,"previous":{"title":"Xss","level":"1.9","depth":1,"path":"src/Xss.md","ref":"src/Xss.md","articles":[]},"dir":"ltr"},"config":{"plugins":["chapter-fold","-lunr","-search","search-pro","-highlight","prism","livereload"],"styles":{"website":"index.css"},"pluginsConfig":{"prism":{"css":["prismjs/themes/prism-tomorrow.css"]},"chapter-fold":{},"search-pro":{},"livereload":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","author":"Gj","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"classbro-u-center-web-v2.0","language":"zh-hans","gitbook":"3.2.3","description":"u-center-web 项目迁移 重构"},"file":{"path":"src/Permission.md","mtime":"2020-07-27T06:30:54.933Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2020-07-27T06:50:03.177Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-chapter-fold/chapter-fold.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

